<template>
    <div class="himg ">
        <div class="view-img-box" v-if="info.ids" :style="{ 'background': info.bg_color }">
            <div class="zw-img-box"
                :class="{ 'g2': info.goods_num == 2, 'g3': info.goods_num == 3 }">
                <img :src="$imgUrl + info.bg_img" alt="">
                <div class="viewImgBox_content " v-if="late_show">
                    <div class="hot-box forbid">
                        <div class="box" v-if="info.goods_num == 2">
                            <div class="goods-item-2" v-for="(item, index) in goods_list" :key="index">
                                <img class="gimg" :src="$imgUrl + item.thumb" alt="">
                                <div class="gname">
                                    {{ item.name }}
                                </div>
                                <div class="price">
                                    <div class="pl">
                                        <span class="pi">¥</span>
                                        <span class="pnum">{{ item.activity_price }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="box" v-if="info.goods_num == 3">
                            <div class="goods-item-3" v-for="(item, index) in goods_list" :key="index">
                                <img class="gimg" :src="$imgUrl + item.thumb" alt="">
                                <div class="gname">
                                    {{ item.name }}
                                </div>
                                <div class="price">
                                    <div class="pl">
                                        <span class="pi">¥</span>
                                        <span class="pnum">{{ item.activity_price }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="view-img-box" v-else>
            <empty icon="Picture" name="轮播商品模块" />
        </div>
    </div>
</template>

<script setup name="BannerGoods">
import empty from '../empty.vue'
const { proxy } = getCurrentInstance();
const props = defineProps({
    info: { required: true },
});

const data = reactive({
    goods_list: []
})
const { goods_list } = toRefs(data)

watch(() => props.info.ids, (val) => {
    getGoods(val)
})

watch(() => props.info.goods_num, (val) => {
    props.info.h = val == 3 ? 180 : 236
})


const late_show = ref(false)
onMounted(() => {
    getGoods(props.info.ids)
    setTimeout(() => {
        late_show.value = true
    }, 100);

});

async function getGoods(ids) {
    if (!ids) return
    let res = await proxy.$post('MallPageGoods', {
        ids
    }, false)
    if (res.code === 0) {
        data.goods_list = res.data || []
    }
}

</script>
<style lang="scss" scoped>
.himg {
    width: 100%;
    height: auto;

    .zw-img-box {
        width: 100%;
        height: auto;

        box-sizing: border-box;
        overflow: hidden;
        border: 1px dashed #ccc;
        position: relative;
    }

    .g2 {
        height: 236px;
    }

    .g3 {
        height: 180px;
    }

    .hot-box {
        width: 100%;
        height: 100%;
        padding: 0 10px;
    }

    .zw-img-box img {
        width: 100%;
        height: auto;
        float: left;
    }

    .viewImgBox_content {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;

    }
}

.box {
    display: flex;
    align-items: center;

}

.goods-item-2,
.goods-item-3 {
    width: 165px;
    height: auto;
    background-color: #fff;
    margin: 0 5px;
    .gimg {
        width: 165px;
        height: 165px;
    }

    .gname {
        min-height: 38px;
        width: 100%;
        padding: 0 6px;
        margin-top: 6px;
        font-size: 13px;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        box-sizing: border-box;

    }

    .price {
        width: 100%;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f00;

        .pi {
            font-size: 10px;
            font-weight: bold;
        }

        .pnum {
            font-size: 16px;
            font-weight: bold;
        }


    }
}

.goods-item-3 {
    width: 110px;

    .gimg {
        width: 110px;
        height: 110px;
    }

    .gname {
        font-size: 12px;
    }
}
</style>
